<template>
	<view class="m-viptabs">
		<view class="card-title flex-between">
			<view class="title">{{$t('m_viptabs.card-title')}}</view>
			<view class="desc">{{$t('m_viptabs.card-desc')}}</view>
		</view>
		<view class="flex-start" style="flex-wrap: nowrap;">
			<view class="level-item" 
				v-for="(item,index) in list" 
				:key="index"
				:class="{'on' : onSet == index,'disable' : onLevel > 1 && onSet != index}" 
				@click="changeLevel(index,item.id)"
				v-if="item.state == 1"
			>	
				<text class="time">{{item.open_time}}{{$t('m_viptabs.day')}}</text>
				<view>{{item.name}}</view>
				<view class="item-price number">{{$t('m_viptabs.rmb')}}<text>{{item.money}}</text></view>
				<view class="item-ori" v-if="item.original_money">{{$t('m_viptabs.price')}} ¥{{item.original_money}}</view>
			</view>
		</view>
		<view class="open-btn">
			<u-button :text="btnText" shape="circle" @click="openVip"></u-button>
			<view class="xieyi" v-if="agreeId > 0">* {{$t('m_viptabs.agree-before')}}<text @click="goAgree(agreeId)">《{{$t('m_viptabs.agree-name')}}》</text></view>
		</view>
		<m-modal
			:show="openShow"
			:btn="$t('m_viptabs.open-modal-title')"
			@btnComplete="openVip"
			@close="popupClose"
		>
			<view class="slot-content">
				<view class="slot-content_item text-center">
					<u-parse :content="$util.handleStr($t('m_viptabs.open-modal-content'),this.onInfo.name)"></u-parse>
				</view>
				<view class="slot-content_item text-danger text-sm m-t-md p-t-md">
					{{$t('m_viptabs.open-modal-content-1')}}
				</view>
			</view>
		</m-modal>
	</view>
	
</template>

<script>
	export default {
		name:"m-viptabs",
		props: ['list','onSet','onInfo','agreeId','onLevel'],
		data() {
			return {
				openShow:false
			};
		},

		computed:{
			btnText:function(){
				return this.$util.handleStr(this.$t('m_viptabs.open-btn'),this.onInfo.money);
			},
			openShowContent:function(){
				return this.$util.handleStr(this.$t('m_viptabs.open-modal-content-2'),this.onInfo.name);
			}
		},
		methods:{
			changeLevel(index,id){
				if(this.onLevel == 1 || this.onLevel > 1  && this.onLevel == id){
					this.$emit("changeLevel",{
						index:index,
						id:id
					})
				}
			},
			openVip(){
				this.$emit('openVip');
				// this.openShow = false;
			},
			goAgree(Id){
				uni.navigateTo({
					url: '/pages/article/article_detail?id='+Id,
				});
			},
			popupClose(){
				this.openShow = false;
			},
		}
	}
</script>

<style lang="scss">
	.m-viptabs{
		background-color: #fff;
		padding: 10px;
		border-radius: 10px;
	}
	.m-viptabs .level-item{
		width: 100%;
		min-width: 30%;
		text-align: center;
		background-color: #fff;
		border-radius: 10px;
		font-size: 27rpx;
		padding: 10px 0;
		border:2px solid #F3F3F3;
		position: relative;
		padding-top: 20px;
	}
	.time{
		position: absolute;
		left: -1px;
		top: -8px;
		background: linear-gradient(90deg, rgb(252,136,105), rgb(250,93,50));
		background-color: #fa5d32;
		border-top-left-radius: 10px;
		border-top-right-radius: 8px;
		border-bottom-right-radius: 8px;
		font-size: 20rpx;
		color: #fff;
		padding: 1px 5px;
	}
	.m-viptabs .level-item.on{
		border:2px solid #d4c58e;
		color: #5e3e29;
		background-color: #fff7e0;
	}
	.m-viptabs .level-item.disable{
		opacity: .5;
	}
	.m-viptabs .level-item:nth-child(2){
		margin: 0 10px;
	}
	.m-viptabs .item-price{
		margin: 6px 0;
		font-weight: bold;
		font-size: 25rpx;
		color: #d08931;
	}
	.m-viptabs .item-price text{
		font-size: 35rpx;
		margin-left: 3px;
	}
	.m-viptabs .item-ori{
		font-size: 25rpx;
		color: #999;
		text-decoration:line-through
	}
	.card-title{
		margin-bottom: 15px;
		font-size: 27rpx;
	}
	.card-title .title{
		font-weight: bold;
	}
	.card-title .desc{
		color: #666
	}
	.open-btn{
		margin-top: 15px;
	}
	.open-btn .xieyi{
		text-align: center;
		font-size: 25rpx;
		margin-top: 10px;
		color: #999;
	}
	.open-btn .xieyi text{
		color: $auxcolor-3;
	}
	.u-button{
		font-weight: bold;
		color: #835612;
		background: linear-gradient(90deg, rgb(246,222,158), rgb(244,194,109));
	}
</style>
